<!DOCTYPE html>
<meta charset="utf-8" />
<title>Women In Politics</title>
<link rel="stylesheet" type="text/css" href="./inspector1.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="./inspector2.css" />
<link rel="stylesheet" type="text/css" href="./inspector.css" />
<link rel="stylesheet" href="heat.css" />
<!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
<body>
  <div id="politician"></div>
  <script type="module">
    import define1 from "./index1.js";
    import { Runtime, Library, Inspector } from "./runtime.js";
    const container1 = document.getElementById("politician");
    const runtime1 = new Runtime();
    const main1 = runtime1.module(define1, Inspector.into(container1));
  </script>

  <script src="d3.v7.js"></script>
  <!-- <script src="http://d3js.org/d3.v4.js"></script> -->
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
  <div class="row">
    <div id="map-container">
      <!-- Create an element where the map will take place -->
      <svg id="my_dataviz" width="800" height="600"></svg>
    </div>
    <script src="main.js"></script>
    <!-- <script src="data.js"></script> -->
    <div class="column">
      <svg id="line-chart" width="500" height="400"></svg>
      <div id="pie">
        <h1>The Number of Countries</h1>
        <h2>with Different Proportions of Female Ministers</h2>
        <!-- <p class="pie-text">Number of countries with the</p> -->
        <!-- <p class="pie-text">of Female ministers</p> -->
        <!-- <p class="pie-text">between</p> -->
        <div class="legend-pie">
          <span class="color1"></span>0%-20% <br />
          <span class="color2"></span>20%-40% <br />
          <span class="color3"></span>40%-60% <br />
          <span class="color4"></span>60%-80% <br />
        </div>
      </div>
    </div>
    <script type="module">
      import define2 from "./pie.js";
      import { Runtime, Library, Inspector } from "./runtime.js";
      const container3 = document.getElementById("pie");
      const runtime2 = new Runtime();
      const main2 = runtime2.module(define2, Inspector.into(container3));
    </script>
  </div>
  <div class="row" style="height:600px">
    <div id="index-rank">
      <div id="legend-container"></div>
    </div>
    <script type="module">
      import define from "./index.js";
      import { Runtime, Library, Inspector } from "./runtime.js";
      const container2 = document.getElementById("index-rank");
      const runtime = new Runtime();
      const main = runtime.module(define, Inspector.into(container2));
    </script>

    <div id="heatmap"></div>
    <script src="try.js"></script>
  </div>
</body>
